<template>
  <div class="cloud_wrap">
    <div class="tagcloud-all">
      <div class="tag" v-for="(item, index) in tagList" :key="index" :style="{ backgroundColor: item.color }">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { getTag } from "@/api/home/home";
export default {
  data() {
    return {
      tagList: [],
    };
  },
  mounted() {
    getTag().then(res=>{
      this.tagList=res
      this.generateColors();
    })

  },
  methods: {
    generateColors() {
      this.tagList.forEach(item => {
        item.color = this.getRandomColor();
      });
    },
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      do {
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
      } while (color === '#ffffff'); // Avoid white color
      return color;
    },
  },
};
</script>

<style scoped>
.cloud_wrap {
  width: 100%;
  height: 50vh; /* 使用视口高度作为父容器的高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagcloud-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tag {
  padding: 8px 16px;
  margin: 10px;
  color: white;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>
